<template>
  <div>订单列表</div>
  <el-button type="primary" @click="toAdd">添加</el-button>
  <!-- 查询开始 搜索的关键字-->
  <el-form :inline="true" :model="search" class="search">
    <el-form-item label="名称" prop="name">
      <el-input v-model="search.name" placeholder="名称" />
    </el-form-item>
    <el-form-item label="日期" prop="date">
      <el-input v-model="search.date" placeholder="日期" />
    </el-form-item>
    <el-form-item label="地址" prop="address">
      <el-input v-model="search.address" placeholder="地址" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
  </el-form>
  <!-- 查询结束 -->
  <el-table :data="ftableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="address" label="地址" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button type="text" size="small" @click.prevent="deleteRow(scope.row)"
          >删除</el-button
        >
        <el-button type="text" size="small" @click="toEdit(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 弹框内容 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
    <el-input v-model="dialogRow.name" placeholder="名称" /> <br />
    <el-input v-model="dialogRow.date" placeholder="日期" /> <br />
    <el-input v-model="dialogRow.address" placeholder="地址" /> <br />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogSure">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
// 数据进行增删改查
import { reactive, ref, computed } from "vue";
// 目标：实现编辑功能

// 弹框的接口
interface Irow {
  date: string;
  name: string;
  address: string;
}
// 搜索
const search = reactive<Irow>({
  date: "",
  name: "",
  address: "",
});

function query() {
  console.log("查询", ftableData.value);
}
// 弹框的数据
const dialogRow = reactive<Irow>({
  date: "",
  name: "",
  address: "",
});
// 弹框是否显示
const dialogVisible = ref(false);
const dialogTitle = ref("编辑");
// 当前编辑的行
const editIndex = ref(-1);
const tableData = reactive([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 180, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 181, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 182, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

function deleteRow(row: Irow): void {
  // scope当前表格的相关的数据
  // scope.row 当前行的数据 查询当前行在tableData中的下标
  var ind = tableData.findIndex((item) => item.date === row.date);
  //   执行删除操作
  tableData.splice(ind, 1);
}
// 去编辑
function toEdit(row: Irow): void {
  editIndex.value = tableData.findIndex((item) => item.date === row.date);
  dialogTitle.value = "编辑";
  // 弹框的数据与当前编辑的数据进行同步
  dialogRow.date = row.date;
  dialogRow.name = row.name;
  dialogRow.address = row.address;
  // 显示弹框
  dialogVisible.value = true;
}
// 弹框确认
function dialogSure(): void {
  // 关闭弹框
  dialogVisible.value = false;
  if (dialogTitle.value === "编辑") {
    // 修改对应行的数据
    tableData[editIndex.value] = { ...dialogRow };
  } else {
    //  不是编辑就是添加
    tableData.unshift({ ...dialogRow });
  }
}

// 添加功能
function toAdd() {
  dialogTitle.value = "添加";
  dialogVisible.value = true;
  // 清空弹框的内容
  dialogRow.date = "";
  dialogRow.name = "";
  dialogRow.address = "";
}
// 从现有的数据计算出新的ftableData
const ftableData = computed(() => {
  // 对tableData过滤
  return tableData.filter((item) => {
    //   默认返回true保留
    var flag = true;
    // 对搜索条件进行遍历
    let key: keyof Irow; //指定key的类型
    for (key in search) {
      // 如果搜索条件不为空
      if (search[key] !== "") {
        // 如果当前key的值包含搜索关键字
        if (item[key].includes(search[key])) {
          //   保留
          flag = true;
        } else {
          //   不保留
          flag = false;
        }
      }
    }
    return flag;
  });
});
</script>
